<template>
	<div class="student">
  <el-tabs v-model="activeName" >
    <el-tab-pane label="班级学生" name="first">
    	<router-link to="/home">
			<el-button type="warning" size="small"   style='margin-right: 5px;margin-left: 20px;' icon="el-icon-menu">首页</el-button>
		</router-link>
		<router-link :to="{path:'/home',query: {id:bjid1,frompage:'bjxs'}}">
		<!--<router-link to="/home">-->
         	<el-button type="warning" size="small" 	class="btn" style='margin-right: 5px;margin-left: 0px;'  icon="el-icon-caret-left">返回</el-button>
        </router-link>
		<el-button type="success" class="btn"   style='margin-left: 0;' size="small" icon="el-icon-edit" @click="componentsShow('add1',params)">添加转班学生</el-button>
		<router-link to="/educa/xsdrexcelst">
			<el-button type="primary" size="small" v-if="this.dataList==''" style='margin-right: 5px;margin-left: 5px;' icon="el-icon-download">学生导入</el-button>
		</router-link>
		<!--<el-button type="primary" class="btn" style='margin-left: 0;' size="small" icon="el-icon-edit" @click="componentsShow('tj',params)">新生报名</el-button>-->
            <!--<el-tooltip  placement="top" class="sx"  >
      				<el-switch  @change="search()" v-model="vzt" active-color="#13ce66" inactive-color="#ff4949" inactive-text="在读" active-text="休学" active-value="N" inactive-value="Y"></el-switch>
      			</el-tooltip>-->
        <i class="el-icon-close close" @click="cancel"></i>
		<el-table
	        :data="dataList"
	         stripe
             border
             size="small"
             type=index
	        align="center"
	        class="table"
	        @select="checkSelect"
	        @select-all="checkall">
	        <div slot='empty'>
	            <img src="../../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
	            <span style="vertical-align: middle;">暂时还没有内容哦!</span>
	        </div>
	        <el-table-column
	            :prop="v.prop"
	            :label="v.label"
	            v-for="(v,index) in portTitleList"
	            align="center"
	            show-overflow-tooltip
	            v-if="v.hide != 0"
	            :align="v.align || 'center'"
	            :fixed="v.fixed"
	            :formatter="v.formatter"
	            :class-name="v.columnStyle"
	            :width="v.width"
	            :min-width="v.minWidth || '150'"
	            :header-align="v.headerAlign || 'center'"
	            >
	            <template scope="scope">
                    <div slot="reference">
                        <div v-if="scope.column.property == 'zwm'" @click="componentsShow('info',scope)">
                            <img
                            :src="scope.row.xb == '男' ? $store.state.sexImg.boy : $store.state.sexImg.girl"
                            style="width:20px;vertical-align:middle; float: left;"
                            v-if="scope.column.property == 'zwm'">
                            <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                        </div>
                        <span style="vertical-align:middle;" v-else>{{ scope.row[scope.column.property] }}</span>

                    </div>
                </template>
	        </el-table-column>

	        <el-table-column label="操作" width="170px" align="center">
                <template scope="scope">
                	<el-button size="mini" type="warning" @click="componentsShow('info',scope)">编辑</el-button>
					<el-dropdown>
	                     <el-button type="primary" size="mini"> 更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						 <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item><el-button size="mini" type="primary" v-if='vzt=="Y"'   @click="componentsShow('change',scope)">转班</el-button></el-dropdown-item>
						    <el-dropdown-item><el-button size="mini" type="danger"  v-if='vzt=="Y"'   @click="componentsShow('xx',scope)">休学</el-button></el-dropdown-item>
						    <el-dropdown-item><el-button size="mini" type="warning" v-if='vzt=="N"'  @click="componentsShow('sx',scope)">上课</el-button></el-dropdown-item>
						 </el-dropdown-menu>
					 </el-dropdown>
                	<!--<el-button size="mini" type="primary" v-if='vzt=="Y"'   @click="componentsShow('bujiao',scope)">缴费</el-button>-->
                </template>
            </el-table-column>
			    </el-table>
    	
    </el-tab-pane>
    <el-tab-pane label="班级流失学生" name="second">
    	<router-link to="/home">
			<el-button type="warning" size="small"   style='margin-right: 5px;margin-left: 20px;' icon="el-icon-menu">首页</el-button>
		</router-link>
		<router-link :to="{path:'/home',query: {id:bjid1,frompage:'bjxs'}}">
		<!--<router-link to="/home">-->
         	<el-button type="warning" size="small" 	class="btn" style='margin-right: 5px;margin-left: 0px;'  icon="el-icon-caret-left">返回</el-button>
        </router-link>
        
    	<el-tabs style="text-align: center;float: left;width: 95%;margin-left: 20px;">
			      <el-table :data="xslsdataList" stripe  border size="small" style="width: 100%" >
			      	<el-table-column type="index"></el-table-column>
			      	<el-table-column prop="zwm"  label="中文名"   width=""></el-table-column>
			      	<el-table-column prop="ywm"  label="英文名"    width=""></el-table-column>
					<el-table-column prop="sj"   label="转出时间"  width=""></el-table-column>
					<el-table-column prop="note" label="转出类型"  width=""></el-table-column>
					<el-table-column fixed="right" align="center" label="操作" width="140px" v-if='false'>
							<template scope="scope">
								<el-button size="small" @click="componentsShow('lsxq',scope)" type="success">详情</el-button>
							</template>
						</el-table-column>
				  </el-table>
				  
	    </el-tabs>
    </el-tab-pane>
  </el-tabs>
  <LsxqComponent v-if="portComponents.lsxq.toggle" @close="componentsHide" :params="portComponents.lsxq.params"></LsxqComponent>
		<BujiaoComponent v-if="portComponents.bujiao.toggle" @close="componentsHide" :params="portComponents.bujiao.params" ></BujiaoComponent>
        <Add1Component v-if="portComponents.add1.toggle"     @close="componentsHide"  :params="portComponents.add1.params"></Add1Component>
        <TjComponent v-if="portComponents.tj.toggle"         @close="componentsHide"  :params="portComponents.tj.params"></TjComponent>
        <SxComponent v-if="portComponents.sx.toggle"         @close="componentsHide" :params="portComponents.sx.params"></SxComponent>
        <ChangeComponent v-if="portComponents.change.toggle" @close="componentsHide"  :params="portComponents.change.params" ></ChangeComponent>
        <infoComponent v-if="portComponents.info.toggle"     @close="componentsHide" :params="portComponents.info.params"></infoComponent>
        <XxComponent v-if="portComponents.xx.toggle"         @close="componentsHide"  :params="portComponents.xx.params" ></XxComponent>
        <DelComponent v-if="portComponents.singleDelete.toggle"  @close="componentsHide" :params="portComponents.singleDelete.params"></DelComponent>

	</div>
</template>

<script type="text/javascript">
	import qs from 'qs'
	 import BujiaoComponent from '@/view/cost/baoming/add'
    import Add1Component from './add1'
    import ChangeComponent from './change'
    import InfoComponent from './info'
    import LsxqComponent from './lsxq'
    import TjComponent from './tj'
    import XxComponent from './xx'
    import SxComponent from './sx'
    import DelComponent from './del'
	export default {
		props: ['params'],
        components: {
            Add1Component,
            BujiaoComponent,
            ChangeComponent,
            DelComponent,
            TjComponent,
            InfoComponent,
            XxComponent,
            SxComponent,
            LsxqComponent
        },
		data () {
			return {
				activeName:'first',
				vzt:'Y',
				type:'1',
				dataList: [],
				xslsdataList:[],
				multipleDelNum: '',
				/*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
//              pageindex: 1,//当前分页页码
//              pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
//              pagesize: 12,//每页显示条目数
//              total: 0,//总条数
				portTitleList: [
					{
                        prop:'id',
                        label:'id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'zwm',
                        label:'中文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'ywm',
                        label:'英文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'bjmc',
                        label:'班级名称',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'zcsj',
                        label:'注册时间',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'zsly',
                        label:'招生来源',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'dh',
                        label:'电话',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'fmdh',
                        label:'父母电话',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'wx',
                        label:'微信号',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'jtdz',
                        label:'家庭地址',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'glxx',
                        label:'公立学校',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'njmc',
                        label:'年级',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'bq',
                        label:'标签',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'bjmc',
                        label:'班级名称',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    }
				],
                 /*组件区域*/
                portComponents: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                     bujiao: {
                        type: 'bujiao',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    add1: {
                        type: 'add1',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    tj: {
                        type: 'tj',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    info: {
                        type: 'info',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    change: {
                        type: 'change',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     xx: {
                        type: 'xx',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     sx: {
                        type: 'sx',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    lsxq: {
                        type: 'lsxq',
                        toggle: false,
                        params: '',
                        data: {}
                    }
                },
			}
		},
		created () {
			//权限
	        var logininfo = JSON.parse(localStorage.logininfo) ;
			this.$store.dispatch('changeTitle',this.$route.query.bjmc+'班级学生');//修改title
			this.$store.dispatch('changeRouterIndex','/educa/class');//修改路由
			// if(this.$route.query.iid){
			// 	this.bjid1=this.$route.query.iid;
			// }else{
			// 	this.bjid1=this.params.row.id;
			// }
			if(this.$route.query.iid) {
				if(this.$route.query.frompage == 'xsaddtj') {
         			this.componentsShow("add");
				}
			}
			if(this.params){
				if(this.params.bjid){
					this.bjid1=this.params.bjid;
				}else{
					this.bjid1=this.params.row.id;
				}
			}else if(this.$route.query.iid){
				this.bjid1=this.$route.query.iid;
			}
			this.search()
			this.getxslscomboxlist()
		},
		methods: {
			search () {
			  var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
              var params2 = qs.stringify({
                      bjid:this.bjid1+'',
                       zt:this.vzt,
                       yhid:logininfo.id+'',
                       xxid:logininfo.xxid+''
               })
             //执行
                 this.axios.post(this.$store.state.api + 'xs/list',  params2 )
                 .then(res => {
//               	console.log(res,'sssss1')
					if (res.data.code == 1) {
						this.dataList = res.data.data.list;
						this.total = res.data.data.totalPage;
						this.$store.state.loading = false;
					}else{
						this.$store.dispatch(res.data.msg)
						this.$store.state.loading = false;
					}
                 })
			},
			 getxslscomboxlist(){
				var logininfo = JSON.parse(localStorage.logininfo) ;
				var params3 = qs.stringify({
					bjid:this.bjid1,
					yhid:logininfo.id,
					xxid:logininfo.xxid
				});
					this.searchLoading = true;
					this.axios.post(this.$store.state.api + 'bjxsjcrz/xsls',params3)
					.then( res => {
//						console.log(res,'pppp')
							let data = res.data.data;
							let list = data.list;
							this.xslsdataList=list;
					}).catch( res => {
							this.searchLoading = false;
					})
			},
			cancel () {
				if(this.$route.query.iid){
					this.$emit('close',{type:'student',cancel:true})
					this.$router.back(-1)
				}else{
					this.$emit('close',{type:'student',cancel:true})
				}
			},

			handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },

            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
            checkSelect (selection, row) {//点击单选select触发事件
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },


            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id

                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;

                        }else if(this.portComponents[i].type == 'test'){
                            this.portComponents[i].data.distinction  = "test";

                        }else if(this.portComponents[i].type == 'score'){
                            this.portComponents[i].data.distinction  = "score";

                        }else{
                            return;
                        }
                        return;
                    }
                }

            },
            componentsHide (setting) { //关闭组件
                this.search();
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;
                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }


		},
		computed: {
//			multipleDeleteDisabled () {
//              console.log(this.multipleDelNum)
//              if (this.multipleDelNum) {
//                  return false;
//              }else{
//                  return true
//              }
//          }
		}
	}
</script>

<style lang="less" scope>

	.student {
		position: absolute;
		top:100px;left:0;
		width: 100%;
		height:107%;
		background: #E8EDF0;
		z-index: 99;
	}
	.wrap {
		text-align: left;
	}
	h2 {
		line-height: 40px;
	}

	.table {
		width: 95%;
		margin-top:15px;
		margin-left: 20px;
	}

	.btn {
		text-align: center;
		 margin-top: 10px;
	}

	.submit {
		width: 120px;
	}
</style>
